// pages/index/index.tsx
import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import {Button, Dialog, Input} from "@nutui/nutui-react-taro";
import HeaderTitle from "@/components/HeaderTitle";
import './index.scss'
import Taro from "@tarojs/taro";
import UserService from "@/shared/services/user/user.service";
import {loadingService} from "@/shared/utils/loading";
import {UserModel} from "@/shared/services/model/user";
import AdminService from "@/shared/services/admin/admin.service";


const Index: React.FC = () => {
  const [phone, setPhone] = useState('')
  const [searchUser, setSearchUser] = useState<UserModel>()
  const [money, setMoney] = useState('')
  const [visible, setVisible] = useState(false)
  const [searchVisible, setSearchVisible] = useState(false)
  const [markVisible, setMarkVisible] = useState(false)

  Taro.useLoad(async (options) => {
    console.log('页面参数:', options);

    // 直接使用 options 获取参数
    setPhone(options.phone)
  });

  const toSave = () => {
    if(!phone || !money || phone.length != 11){
      Taro.showToast({
        title: '请输入手机号和金额',
        icon: 'none'
      })
      return
    }
    setVisible(true)
  }

  const toMark = () => {
    setMarkVisible(false)
    Taro.navigateTo({ url: `/pages/admin/mark/index?phone=${phone}` });
  }

  const search = async () => {
    //搜索用户剩余金额
    if(!phone || phone.length != 11){
      Taro.showToast({
        title: '请输入完整手机号',
        icon: 'none'
      })
      return
    }
    loadingService.show({})
    const response = await UserService.userInfoByPhone({
      phone: phone
    })

    loadingService.hide()
    if(response.code == 0){
      setSearchUser(response.data)
      setSearchVisible(true)
    }else{
      Taro.showToast({
        title: '查询失败或者没有该用户',
        icon: 'none'
      })
    }
  }

  const confirmSave = async () => {
    setVisible(false)
    loadingService.show({})
    const response = await UserService.recharge({
      phone: phone,amount: money
    })

    loadingService.hide()
    if(response.code == 0){
      setMarkVisible(true)
      setMoney("")
    }else{
      console.log(response.msg)
      Taro.showToast({
        title: response.msg,
        icon: 'none'
      })
    }
  }

  return (
    <View className="pageContainer">
      {/* Header */}
      <View className='order-header'>
        <HeaderTitle title={'手动储值'} />
      </View>

      <View>
        {/*<Input placeholder="请输入手机号" type="digit" value={phone}*/}
        {/*       maxLength={11}*/}
        {/*       onChange={(val) => setPhone(val)}/>*/}
        {/*<Input placeholder="请输入储值金额" type="digit" value={money}*/}
        {/*       maxLength={4}*/}
        {/*       onChange={(val) => setMoney(val)}/>*/}

        <View className="inputGroup">
          <View className="inputItem">
            <Text className="label">手机号</Text>
            <Input
              className="customInput"
              placeholder="请输入手机号"
              type="digit"
              value={phone}
              onChange={(val) => setPhone(val)}
            />
          </View>

          <View className="inputItem">
            <Text className="label">充值金额</Text>
            <Input
              className="customInput"
              placeholder="请输入储值金额"
              type="digit"
              value={money}
              onChange={(val) => setMoney(val)}
            />
          </View>
        </View>

        <View className='confirm'>
          <Button
            block={true}
            className='to-save'
            onClick={toSave}
            type='primary'
            color='#121214'
          >确定</Button>
          <Button
            block={true}
            className='search'
            onClick={search}
            type='primary'
          >查询余额</Button>
        </View>

      </View>
      <Dialog
        title="充值确认"
        visible={visible}
        onConfirm={confirmSave}
        onCancel={() => setVisible(false)}
      >
        确认给手机号<Text className="phone">{phone}</Text>充值<Text className="money">{money}</Text>元吗?
      </Dialog>

      <Dialog
        title="查询用户余额"
        visible={searchVisible}
        onConfirm={() => setSearchVisible(false)}
        onCancel={() => setSearchVisible(false)}
      >
        该用户余额为: <Text className="money">{searchUser?.balance}</Text>元
      </Dialog>

      <Dialog
        title="修改用户信息"
        visible={markVisible}
        onConfirm={() => toMark()}
        confirmText={"去修改"}
        cancelText={"暂时不用"}
        onCancel={() => setMarkVisible(false)}
      >
        <Text className="mark">充值成功,是否为该用户修改姓名和备注?</Text>
      </Dialog>
    </View>
  )
}

export default Index
